<script setup lang="ts" >
import { ref, watch, Ref } from "vue";
import { useRoute, RouteLocationMatched, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//    定义导航数据,设置类型，否则赋值会报错
const tabs: Ref<any> = ref([]);
const props = defineProps<{
    tabData:Array<any>
	}>();

const tabClick=(item:any,index:Number)=>{
  console.log(item,index)
  if(item.queryData){
    router.replace({
      path:item.path,
      query:item.queryData
    })
  }else{
    router.push(item.path)
  }
}

</script>
 <template>
  <div class="nav">
    <!-- :to="index!=props.tabData.length-1? item.path:''" -->
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in props.tabData"
        :key="index"
        @click="index!=props.tabData.length-1?tabClick(item,index):''"
        
      >
        <img :src="item.icon" alt="" />
        <span style="cursor: pointer;" :style="index == 0 ? 'margin-left:30px' : ''">{{
          item.name
        }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style lang="scss">
.nav {
  display: inline-block;
  margin-bottom: 10px;
  img {
    height: 20px;
    position: absolute;
    left: 0px;
  }
  .el-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 22px;
    color: rgba(90, 96, 127, 100);
  }
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(0px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

.app-breadcrumb.el-breadcrumb {
  width: fit-content;
  background: white;
  padding: 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
}
</style>

